<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/*通用选择器：通用效果  盒模型：内外边距*/
			*{
				margin: 0;
				padding: 0;
			}
			/* 1.容器：看3D视觉效果--①宽高②居中③视觉属性 */
			.container{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/*视觉属性： 数值px; 拉开距离*/
				perspective: 3000px;
				bor der: 1px solid red;
			}
			/* 2.魔方整体：①宽高②指定3D坐标轴【3D效果层】②查看3D坐标轴【X,Y】③动画 */
			.box{
				width: 300px;
				height: 300px;
				/* 3D效果层：指定3D坐标轴：X，Y，Z轴 */
				transform-style: preserve-3d;
				/* 倾斜：X 45deg Y 45deg 查看3D坐标轴*/
				transform: rotateX(45deg) rotateY(45deg);
				animation: mofang 10s linear infinite;
			}
			@keyframes mofang{
				0%{
					transform: rotateX(45deg) rotateY(45deg);
				}
				70%{
					transform: rotateX(180deg) rotateY(180deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/* 3.六个面，公共属性：设定宽高，绝对定位 */
			.page{
				width: 300px;
				height: 300px;
				/* 绝对定位：6个面定到一个点，定坐标轴，6个面所有坐标轴一致 */
				position: absolute;
				background-size: 100% 100%;
			}
			/* 3.1六个添加6个颜色 */
			.page_top{
				background-color: #e4393c;
				background-image: url(../Project/landi/1.jpg);
				/*Z轴顶部平移150px*/
				transform: translateZ(150px);
			}
			.page_bottom{
				background-color: #ffff00;
				background-image: url(../Project/landi/2.jpg);
				/*Z轴底部平移-150px  向下*/
				transform: translateZ(-150px);
			}
			.page_left{
				background-color: #0000ff;
				background-image: url(../Project/landi/3.jpg);
				/*X轴：向左平移-150px 按照Y轴旋转：90deg*/
				transform: translateX(-150px) rotateY(90deg);
			}
			.page_right{
				background-color: #55ffff;
				background-image: url(../Project/landi/4.jpg);
				/* X轴向右平移150px 按照Y轴旋转：90deg */
				transform: translateX(150px) rotateY(90deg);
			}
			.page_before{
				background-color: #dc14ff;
				background-image: url(../Project/landi/5.jpg);
				/*Y轴向右平移150px 按照X轴旋转90deg*/
				transform: translateY(150px) rotateX(90deg);
			}
			.page_after{
				background-color: #ffaa00;
				background-image: url(../Project/landi/6.jpg);
				/*Y轴向左平移-150px 按照X轴旋转90deg*/
				transform: translateY(-150px) rotateX(90deg);
			}
		</style>
	</head>
	<body>
		<!-- 3D魔方  1.容器：看3D效果  2.魔方整体 3.6个面 -->
		<div class="container">
			<div class="box">
				<!-- 6个面特点：①6个面宽高一致 ②颜色不一致
				 使用类选择器：多别名方式解决上述问题-->
				<div class="page page_top"></div>
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
		<audio src="lonely.mp3"autoplay loop></audio>
	</body>
</html>